<template>
	<scroll-view class="scrView" :scroll-y="true" :lowerThreshold="50" @scrolltolower="scrolltolowerHandle">
		<!-- <view class="events-banner">
			<view class="tips">
				公告
			</view>
			<u-notice-bar
				:text="banner" 
				direction="column" 
				font-size="12px"
			></u-notice-bar>
			
		</view> -->

		<view class="notice-wrap">
			<view class="notice-label">
				公告
			</view>
			<view class="notice-bar">
				<swiper class="notice-swiper" autoplay vertical circular>
					<swiper-item v-for="(b, i) in banner" :key="i">
						<view class="bar-item">
							<text>{{b.nickname}}</text> 参加了 <text>{{b.name}}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<view class="page-title">
			热门活动上线中
		</view>

		<OngoingItem v-for="(o, i) in ongoing" :key="i" :ongoingImage="o.image" :ongoingName="o.name"	:ongoingTime="o.time_text" :ongoingUrl="o.url"></OngoingItem>

		<view class="page-title">
			往期回顾
		</view>
		<EndedItem v-for="(e, index) in ended" :key="index + 1000" :endedImage="e.image" :endedName="e.name" :endedTime="e.time_text" :endedUrl="e.url"></EndedItem>
		
		<u-gap height="30" bgColor="#fff"></u-gap>
		<LoadingBar></LoadingBar>
	</scroll-view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		http
	} from '../untils/http.js'
	import OngoingItem from '../../douguoApp/components/items/OngoingItem.vue'
	import EndedItem from '../../douguoApp/components/items/EndedItem.vue'
	import LoadingBar from '../../douguoApp/components/LoadingBar.vue'

	const url = 'home/events/getlists?offset=0limit=20'

	export default {
		name: "EventsView",
		data() {
			return {
				banner: ['123123'],
				ongoing: [],
				ended: [],
				index: 10,
				loading: false
			};
		},
		created() {
			console.log('活动页面出生了');
			
			// 第一次加载需要请求banner
			// 后续加载不需要请求
			http(url).then(res => {
				// console.log('活动页面自己发送网络请求拿到的数据', res);

				// 定义临时数组 将接收到的对象转换为数组
				// let arr = [...res.banner]

				// arr.forEach((item, index, arr) => {
				// 	// console.log(arr[index].nickname, arr[index].name);
				// 	this.banner[index] = `${arr[index].nickname} 刚参加了 ${arr[index].name}`
				// })
				// // console.log(this.banner);


				this.banner = res.data.banner
				this.ongoing = res.data.ongoing.events
				this.ended = res.data.ended.events

				this.$nextTick(() => {
					this.loading = false
				})
			})
		},
		components: {
			OngoingItem,
			EndedItem,
			LoadingBar
		},
		methods: {
			getEventsFromSerever() {
				this.loading = 'true'
				// let url = 'home/events/getlists?offset=' + this.ongoing.length + '/20'
				let url = 'home/events/getlists?offset=' + this.index + '/20'
				
				// 第一次网络请求，需要请求topics
				// 后续加载不需要请求
				http(url).then(res => {
					
					this.ongoing = [...this.ongoing, ...res.data.ongoing.events]
					this.ended = [...this.ended, ...res.data.ended.events]
					console.log(this.ongoing);
					console.log(this.ended);
					
					this.$nextTick(() => {
						this.loading = false
						this.index += 10
						console.log(this.index);
					})
				})
			},
			getDataFromServerData(cb) {
				let url = 'home/events/getlists'
				console.log('重新请求数据');
				let timeStamp = new Date().getTime()
				// console.log(timeStamp);
				http(url + '?timestamp=' + timeStamp).then((res) => {
					cb && this.$nextTick(cb)
					this.ongoing = res.data.ongoing.events
					this.ended = res.data.ended.events
				})
			},
			scrolltolowerHandle() {
				if(!this.loading) {
					console.log('滑到底部');
					this.getEventsFromSerever()
				}
			}
		}
	}
</script>

<style lang="scss">
	.scrView {
		position: fixed;
		top: 77px;
		bottom: 50px;
	}
	
	// .events-banner {
	// 	display: flex;
	// 	align-items: center;
	// 	background-color: #fdf6ec;
	// 	height: 50px;

	// 	.tips {
	// 		width: 38px;
	// 		height: 22px;
	// 		font-weight: 700;
	// 		text-align: center;
	// 		// border-radius: 5px;
	// 		border-top-right-radius: 8px;
	// 		border-bottom-left-radius: 8px;
	// 		background-color: #f2c256;
	// 		margin-left: 5px;
	// 	}
	// }

	.notice-wrap {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 0 8px;
		width: 750rpx;
		background-color: #fdf6ec;
	}

	.notice-label {
		// margin-right: 5px;
		padding: 2px 6px;
		background-color: #f2c256;
		font-size: 12px;
		font-weight: 700;
		border-radius: 0 12px 0 12px;
		transform: scale(.7);
	}

	.notice-bar {
		flex: 1;

		.notice-swiper {
			height: 24px;
		}

		.bar-item {
			height: 24px;
			font-size: 12px;
			line-height: 24px;

			text {
				margin: 0 4px;
				font-weight: 700;
			}
		}
	}

	.page-title {
		margin: 10px 0 8px 0;
		padding: 0 12rpx;
		font-size: 18px;
		font-weight: 700;
	}
</style>